<template>
  <div class="personal">
    <el-row>
			<el-col :span="18" style="padding-bottom: 20px;">
				<span class="back" @click="back"><i></i> 返回</span>
				<div class="btn-wp" v-if="watch">
					<el-button type="success" @click="dayin">打印</el-button>
					<el-button type="warning" @click="updateBtn">编辑</el-button>
				</div>
				<div class="btn-wp" v-else>
					<el-button type="danger" @click="setLeaveBtn" v-show="initText.leave_time==='-'">设置离职</el-button>
					<el-button type="primary" @click="saveBtn">保存</el-button>
					<el-button @click="resetForm">取消</el-button>
				</div>
			</el-col>
    </el-row>
		<el-row>
			<el-form v-if="watch" label-width="100px" label-position="left">
				<el-col :span="18">
					<div class="scroll-wrap">
						<el-scrollbar class="scrollbar-wrap" style="height:100%">
							<el-card class="box-card" id="printJS-form">
								<div class="header">
									<el-col :span="12" class="header-left">
										<span>工号条码</span>
										<div class="codebg">
											<div id="qrcode" ref="qrcode"></div>
										</div>
									</el-col>
									<el-col :span="12" class="header-left">
										<img :src="initText.photo_url" alt="">
									</el-col>
								</div>
								<div class="block">
									<div>
										<p>基础信息</p>
										<el-row class="itme">
											<el-col :span='12'>
												<el-form-item label="姓名" prop="" class="space-2">
													<span class="space-0">{{initText.username}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="工号" class="space-2">
													<span class="space-0">{{initText.job_num}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="隶属公司" prop="">
													<span class="space-0">{{initText.company_name}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="部门" prop="" class="space-2">
													<span class="space-0">{{initText.department_name}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="职位" prop="" class="space-2">
													<span class="space-0">{{initText.position}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="手机号" prop="" class="space-3">
													<span class="space-0">{{initText.mobile}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="入职时间" prop="">
													<span>{{initText.entry_time}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="离职时间">
													<span class="font-color" v-if="initText.leave_time === '0'">离职后生成</span>
													<span class="font-color" v-else>{{initText.leave_time}}</span>
												</el-form-item>
											</el-col>
										</el-row>
									</div>
									<div>
										<p>工作信息</p>
										<el-row class="itme">
											<el-col :span='12'>
												<el-form-item label="员工类型" prop="">
													<span>{{initText.emptype_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="试用期" prop="" class="space-3">
													<span class="space-0">{{initText.trial_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="员工状态" prop="">
													<span>{{initText.status_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="转正日期" prop="">
													<span>{{initText.positive_time}}</span>
												</el-form-item>
											</el-col>
										</el-row>
									</div>
									<div>
										<p>合同信息</p>
										<el-row class="itme">
											<el-col :span='12'>
												<el-form-item label="合同类型" prop="">
													<span>{{initText.contract_type_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="合同期限" prop="">
													<span>{{initText.contract_life_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="合同起始日" prop="">
													<span>{{initText.contract_begin_time}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="合同到期日" prop="">
													<span>{{initText.contract_end_time}}</span>
												</el-form-item>
											</el-col>
										</el-row>
									</div>
									<div>
										<p>个人信息</p>
										<el-row class="itme">
											<el-col :span='12'>
												<el-form-item label="身份证姓名" prop="">
													<span>{{initText.Id_name}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="证件号码" prop="">
													<span>{{initText.identify}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="出生日期" prop="">
													<span v-if="initText.birthday == '0'"></span>
													<span v-else>{{initText.birthday}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="性别" prop="" class="space-2">
													<span class="space-0">{{initText.sex_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="民族" prop="" class="space-2">
													<span class="space-0">{{initText.nation_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="身份证地址" prop="">
													<span>{{initText.Id_address}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="证件有效期" prop="">
													<span v-if="initText.Id_deadline === '0'"></span>
													<span v-else>{{initText.Id_deadline}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="户籍类型" prop="">
													<span>{{initText.register_type_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="婚姻状况" prop="">
													<span>{{initText.marriage_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="政治面貌" prop="">
													<span>{{initText.political_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="社保账号" prop="">
													<span>{{initText.social_account}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="公积金账号" prop="">
													<span>{{initText.public_fund_account}}</span>
												</el-form-item>
											</el-col>
										</el-row>
									</div>
									<div>
										<p>学历信息</p>
										<el-row class="itme">
											<el-col :span='12'>
												<el-form-item label="最高学历" prop="">
													<span>{{initText.highest_degree_text}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="毕业院校" prop="">
													<span>{{initText.graduate_school}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="毕业时间" prop="">
													<span v-if="initText.graduate_time == '0'"></span>
													<span v-else>{{initText.graduate_time}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="所学专业" prop="">
													<span>{{initText.major}}</span>
												</el-form-item>
											</el-col>
										</el-row>
									</div>
									<div>
										<p>工资卡信息</p>
										<el-row class="itme">
											<el-col :span='12'>
												<el-form-item label="银行卡号" prop="">
													<span>{{initText.bank_card_num}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="开户行" prop="" class="space-3">
													<span class="space-0">{{initText.open_bank}}</span>
												</el-form-item>
											</el-col>
										</el-row>
									</div>
									<div>
										<p>紧急联系人</p>
										<el-row class="itme">
											<el-col :span='12'>
												<el-form-item label="姓名" prop="" class="space-2">
													<span class="space-0">{{initText.emergency_contact_name}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="联系电话" prop="">
													<span>{{initText.emergency_contact_mobile}}</span>
												</el-form-item>
											</el-col>
											<el-col :span='12'>
												<el-form-item label="关系" prop="" class="space-2">
													<span class="space-0">{{initText.emergency_contact_relation_text}}</span>
												</el-form-item>
											</el-col>
										</el-row>
									</div>
									<div>
										<p>个人资料</p>
										<el-row class="itme">
											<el-col :span="12" class="header-left">
												<span>身份证正面</span>
												<div class="codebg">
													<img :src="imgJson?imgJson.ID_card_front:''" alt="">
												</div>
											</el-col>
											<el-col :span="12" class="header-left">
												<span>身份证背面</span>
												<div class="codebg">
													<img :src="imgJson?imgJson.ID_card_reverse:''" alt="">
												</div>
											</el-col>
											<el-col :span="12" class="header-left">
												<span>学历证书</span>
												<div class="codebg">
													<img :src="imgJson?imgJson.academic:''" alt="">
												</div>
											</el-col>
											<el-col :span="12" class="header-left">
												<span>学位证书</span>
												<div class="codebg">
													<img :src="imgJson?imgJson.degree:''" alt="">
												</div>
											</el-col>
											<el-col :span="12" class="header-left">
												<span>离职证明</span>
												<div class="codebg">
													<img :src="imgJson?imgJson.leave_positive:''" alt="">
												</div>
											</el-col>
										</el-row>
									</div>
								</div>
							</el-card>
						</el-scrollbar>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="history-timeline clearfix">
						<div class="time-line" v-for="(item,index) in navRight" :key="index">
							<div class="time-line-circle" :class="{'bgcolor': bgColor[index]}"><i :class="{'bgcolor': bgColor[index+1]}"></i></div>
							<div class="time-line-right">
								<div class="line-right-text">
									<span class="span-t" :class="{'textcolor': bgColor[index]}" @click="scrollTo(index)">{{item}}</span>
									<span class="span-content"></span>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-form>
		</el-row>
		<el-row>
			<el-form v-if="!watch" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="left">
				<el-col :span="18">
					<div class="scroll-wrap">
						<el-scrollbar class="scrollbar-wrap" style="height:100%">
							<el-card class="box-card" id="printJS-form">
								<div class="header">
									<el-col :span="12" class="header-left">
										<span>工号条码</span>
										<div class="codebg">
											<div id="qrcode" ref="qrcode"></div>
										</div>
									</el-col>
									<el-col :span="12" class="header-left">

										<span>上传头像</span>
										<el-upload
											class="avatar-uploader"
											list-type="picture-card"
											:action="http"
											:show-file-list="false"
											:before-upload="beforeAvatarUpload"
											:on-success="headerSuccess">
											<img v-if="photoArr.header_url" :src="photoArr.header_url" class="avatar">
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</el-col>
								</div>
								<div class="block">
										<div>
											<p>基础信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="姓名" prop="username">
														<el-input v-model="ruleForm.username" placeholder="请输入姓名"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="工号">
														<span>{{initText.job_num}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="隶属公司" prop="company_id">
														<el-select @change="companyChoose"
															v-model="ruleForm.company_id"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.company_arr"
																:key="item.id"
																:label="item.company_name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="部门" prop="department_id">
														<el-select
															v-model="ruleForm.department_id"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.section_arr"
																:key="item.id"
																:label="item.department_name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="职位" prop="position">
														<el-input v-model="ruleForm.position" placeholder="请输入职位"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="手机号" prop="mobile">
														<el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="入职时间" prop="entry_time">
														<el-date-picker
															:editable="false"
															prefix-icon="el-icon-date"
															v-model="ruleForm.entry_time"
															align="right"
															type="date"
															@blur="baseTime"
															placeholder="选择日期"
															:picker-options="picker.options1">
														</el-date-picker>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="离职时间">
														<span class="font-color" v-if="initText.leave_time === '0'">离职后生成</span>
														<span class="font-color" v-else>{{initText.leave_time}}</span>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>工作信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="员工类型" prop="emptype">
														<el-select
															v-model="ruleForm.emptype"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.emptype_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="试用期" prop="trial">
														<el-select @change="trialChoose"
															v-model="ruleForm.trial"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.trial_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="员工状态" prop="status">
														<el-select
															v-model="ruleForm.status"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.employee_status"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="转正日期" prop="positive_time">
														<el-date-picker
															prefix-icon="el-icon-date"
															:editable="false"
															v-model="ruleForm.positive_time"
															align="right"
															type="date"
															placeholder="选择日期"
															:picker-options="picker.options2">
														</el-date-picker>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>合同信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="合同类型" prop="contract_type">
														<el-select
															v-model="ruleForm.contract_type"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.contract_type_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="合同期限" prop="contract_life">
														<el-select @change="contractChoose"
															v-model="ruleForm.contract_life"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.contract_life_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="合同起始日" prop="contract_begin_time">
														<el-date-picker
															prefix-icon="el-icon-date"
															:editable="false"
															v-model="ruleForm.contract_begin_time"
															align="right"
															type="date"
															placeholder="选择日期"
															@blur="beginTime"
															:picker-options="picker.options3">
														</el-date-picker>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="合同到期日" prop="contract_end_time">
														<el-date-picker
															prefix-icon="el-icon-date"
															:editable="false"
															v-model="ruleForm.contract_end_time"
															align="right"
															type="date"
															placeholder="选择日期"
															:picker-options="picker.options4">
														</el-date-picker>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>个人信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="身份证姓名" prop="Id_name">
														<el-input v-model="ruleForm.Id_name" placeholder="请输入姓名"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="证件号码" prop="identify">
														<el-input v-model="ruleForm.identify" @blur="idBlur(ruleForm.identify)" placeholder="请输入证件号码"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="出生日期" prop="birthday">
														<el-date-picker
															prefix-icon="el-icon-date"
															:editable="false"
															v-model="ruleForm.birthday"
															align="right"
															type="date"
															placeholder="选择日期">
														</el-date-picker>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="性别" prop="sex">
														<el-select
															v-model="ruleForm.sex"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.sex_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="民族" prop="nation">
														<el-select
															v-model="ruleForm.nation"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.nation_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="身份证地址" prop="Id_address">
														<el-input v-model="ruleForm.Id_address" placeholder="请输入身份证地址" maxlength="18"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="证件有效期" prop="Id_deadline">
														<el-date-picker
															prefix-icon="el-icon-date"
															:editable="false"
															v-model="ruleForm.Id_deadline"
															align="right"
															type="date"
															placeholder="选择日期">
														</el-date-picker>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="户籍类型" prop="register_type">
														<el-select
															v-model="ruleForm.register_type"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.register_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="婚姻状况" prop="marriage">
														<el-select
															v-model="ruleForm.marriage"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.marriage_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="政治面貌" prop="political">
														<el-select
															v-model="ruleForm.political"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.political_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="社保账号" prop="social_account">
														<el-input v-model="ruleForm.social_account" placeholder="请输入社保账号" maxlength="18"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="公积金账号" prop="public_fund_account">
														<el-input v-model="ruleForm.public_fund_account" placeholder="请输入公积金账号" maxlength="20"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>学历信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="最高学历" prop="highest_degree">
														<el-select
															v-model="ruleForm.highest_degree"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.highest_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="毕业院校" prop="graduate_school">
														<el-input v-model="ruleForm.graduate_school" placeholder="请输入毕业院校"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12' prop="graduate_time">
													<el-form-item label="毕业时间">
														<el-date-picker
															prefix-icon="el-icon-date"
															:editable="false"
															v-model="ruleForm.graduate_time"
															align="right"
															type="date"
															placeholder="选择日期">
														</el-date-picker>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="所学专业" prop="major">
														<el-input v-model="ruleForm.major" placeholder="请输入所学专业"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>工资卡信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="银行卡号" prop="bank_card_num">
														<el-input v-model="ruleForm.bank_card_num" placeholder="请输入银行卡号" maxlength="20"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="开户行" prop="open_bank">
														<el-input v-model="ruleForm.open_bank" placeholder="请输入开户行"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>紧急联系人</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="姓名" prop="emergency_contact_name">
														<el-input v-model="ruleForm.emergency_contact_name" placeholder="请输入姓名"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="联系电话" prop="emergency_contact_mobile">
														<el-input v-model="ruleForm.emergency_contact_mobile" placeholder="请输入联系电话"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="关系" prop="emergency_contact_relation">
														<el-select
															v-model="ruleForm.emergency_contact_relation"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.emergency_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>个人资料</p>
											<el-row class="itme">
												<el-col :span="12" class="header-left">
													<span>身份证正面</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="ID_frontSuccess">
														<img v-if="photoArr.ID_card_front_url" :src="photoArr.ID_card_front_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
												<el-col :span="12" class="header-left">
													<span>身份证背面</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="ID_reverseSuccess">
														<img v-if="photoArr.ID_card_reverse_url" :src="photoArr.ID_card_reverse_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
												<el-col :span="12" class="header-left">
													<span>学历证书</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="academicSuccess">
														<img v-if="photoArr.academic_url" :src="photoArr.academic_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
												<el-col :span="12" class="header-left">
													<span>学位证书</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="degreeSuccess">
														<img v-if="photoArr.degree_url" :src="photoArr.degree_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
												<el-col :span="12" class="header-left">
													<span>离职证明</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="leaveSuccess">
														<img v-if="photoArr.leave_positive_url" :src="photoArr.leave_positive_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
											</el-row>
										</div>
								</div>
							</el-card>
						</el-scrollbar>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="history-timeline clearfix">
						<div class="time-line" v-for="(item,index) in navRight" :key="index">
							<div class="time-line-circle" :class="{'bgcolor': bgColor[index]}"><i :class="{'bgcolor': bgColor[index+1]}"></i></div>
							<div class="time-line-right">
								<div class="line-right-text">
									<span class="span-t" :class="{'textcolor': bgColor[index]}" @click="scrollTo(index)">{{item}}</span>
									<span class="span-content"></span>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-form>
		</el-row>
		<div id="printWrap" v-if='printHtml'>
			<el-row>
				<el-col class="first-wrap">
					<p>
						<span>{{initText.username}}</span>
						<span>工号：{{initText.job_num}}</span>
					</p>
					<el-row class="item">
						<el-col :span="9"><span>隶属公司</span>{{initText.company_name}}</el-col>
						<el-col :span="7"><span>手机号</span>{{initText.mobile}}</el-col>
						<el-col :span="9"><span>职位</span>{{initText.position}}</el-col>
						<el-col :span="7"><span>入职时间</span>{{initText.entry_time}}</el-col>
						<el-col :span="9"><span>部门</span>{{initText.department_name}}</el-col>
						<el-col :span="7"><span>离职时间</span>{{initText.leave_time}}</el-col>
						<div id="printQrcode"></div>
					</el-row>
					<img :src="initText.photo_url" alt="">
				</el-col>
			</el-row>
			<el-row class="item">
				<p>工作信息</p>
				<el-col :span="12"><span>员工类型</span>{{initText.emptype_text}}</el-col>
				<el-col :span="12"><span>试用期期限</span>{{initText.trial_text}}</el-col>
				<el-col :span="12"><span>员工状态</span>{{initText.status_text}}</el-col>
				<el-col :span="12"><span>转正日期</span>{{initText.positive_time}}</el-col>
			</el-row>
			<el-row class="item">
				<p>合同信息</p>
				<el-col :span="12"><span>合同类型</span>{{initText.contract_type_text}}</el-col>
				<el-col :span="12"><span>合同起始日</span>{{initText.contract_begin_time}}</el-col>
				<el-col :span="12"><span>合同期限</span>{{initText.contract_life_text}}</el-col>
				<el-col :span="12"><span>合同到期日</span>{{initText.contract_end_time}}</el-col>
			</el-row>
			<el-row class="item">
				<p>个人信息</p>
				<el-col :span="12"><span>身份证姓名</span>{{initText.Id_name}}</el-col>
				<el-col :span="12"><span>身份证地址</span>{{initText.Id_address}}</el-col>
				<el-col :span="12"><span>性别</span>{{initText.sex_text}}</el-col>
				<el-col :span="12"><span>证件有效期</span>{{initText.Id_deadline}}</el-col>
				<el-col :span="12"><span>身份证号码</span>{{initText.identify}}</el-col>
				<el-col :span="12"><span>出生日期</span>{{initText.birthday}}</el-col>
				<el-col :span="12"><span>民族</span>{{initText.nation_text}}</el-col>
				<el-col :span="12"><span>政治面貌</span>{{initText.political_text}}</el-col>
				<el-col :span="12"><span>婚姻状况</span>{{initText.marriage_text}}</el-col>
				<el-col :span="12"><span>户籍类型</span>{{initText.register_type_text}}</el-col>
				<el-col :span="12"><span>社保账号</span>{{initText.social_account}}</el-col>
				<el-col :span="12"><span>公积金账号</span>{{initText.public_fund_account}}</el-col>
			</el-row>
			<el-row class="item">
				<p>学历信息</p>
				<el-col :span="12"><span>最高学历</span>{{initText.highest_degree_text}}</el-col>
				<el-col :span="12"><span>毕业时间</span>{{initText.graduate_time}}</el-col>
				<el-col :span="12"><span>所学专业</span>{{initText.major}}</el-col>
				<el-col :span="12"><span>毕业院校</span>{{initText.graduate_school}}</el-col>
			</el-row>
			<el-row class="item">
				<p>工资卡信息</p>
				<el-col :span="12"><span>银行卡号</span>{{initText.bank_card_num}}</el-col>
				<el-col :span="12"><span>开户行</span>{{initText.open_bank}}</el-col>
			</el-row>
			<el-row class="item">
				<p>紧急联系人</p>
				<el-col :span="12"><span>姓名</span>{{initText.emergency_contact_name}}({{initText.emergency_contact_relation_text}})</el-col>
				<el-col :span="12"><span>联系电话</span>{{initText.emergency_contact_mobile}}</el-col>
			</el-row>
		</div>
  </div>
</template>

<style scoped>
/* 打印区域 */
#printWrap {
	font-size: 13px;
	color: #3e3a39;
	background: #f5f5f5;
	padding: 0 50px;
}
.first-wrap {
	position: relative;
}
.first-wrap p {
	width: 75%;
	height: 44px;
	line-height: 44px;
	margin: 0;
	border-bottom: 1px solid #3e3a39;
}
#printWrap > .item {
	margin-top: 40px;
}
.item p {
	height: 40px;
	margin: 0;
	font-size: 19px;
	font-weight: bold;
	border-bottom: 1px solid #3e3a39;
}
.first-wrap p:after {
	content: '';
	display: inline-block;
	clear: both;
}
.first-wrap p span {
	float: right;
}
.first-wrap p span:first-child {
	font-weight: bold;
	float: left;
	font-size: 20px;
}
.item > div {
	padding-bottom: 0!important;
}
.item > div span {
	width: 75px;
	display: inline-block;
	font-weight: bold;
}
.first-wrap > img {
	width: 130px;
	height: 130px;
	position: absolute;
	top: 23px;
	right: 0;
}
#printQrcode {
	position: relative;
	top: 23px;
	left: -10px;
}

</style>
<style scoped>
/* 头部 */
.back {
	cursor: pointer;
	line-height: 38px;
}
.back i:after {
	content: " ";
	display: inline-block;
	height: 8px;
	width: 8px;
	border-width: 0 0 2px 2px ;
	border-color: #C8C8CD;
	border-style: solid;
	-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	margin-top: -4px;
}
.btn-wp {
	float: right;
}
/* 滚动条 盒子*/
.scroll-wrap {
  /*height: 600px;*/
	height:calc(100vh - 280px);
  overflow: hidden;
}
.scroll-wrap >>> .el-scrollbar .el-scrollbar__wrap {
	overflow-x: hidden!important;
  overflow-y: auto!important;
}
.box-card >>> .el-card__body {
	padding: 20px 0 0!important;
}
.header {
	padding: 0 50px 20px;
}
.header:after {
	content: '';
	display: block;
	clear: both;
}
.header-left {
	height: 160px;
	padding: 0 50px;
}
.header-left > span {
	width: 80px;
	float: left;
	margin-top: 70px;
}
.header-left .codebg {
	float: left;
	width: 130px;
	height: 130px;
	background-color: #f8f8f8;
	border: 1px solid #dcdfe6;
	border-radius:  5px;
	margin-top: 13px;
	margin-left: 25px;
}
.header-left #qrcode {
	margin-left: 7px;
	margin-top: 7px;
}
.header-left img {
	width: 130px;
	height: 130px;
	margin-top: 13px;
	margin-left: 80px;
}
.codebg img {
	margin: 0 !important;
}
.block p {
	margin: 0;
	font-size: 14px;
	padding: 16px 50px;
	background: #f5f7fa;
	font-weight: bold;
}
.el-form >>> .el-row {
	padding: 16px 50px;
}
.el-row >>> .el-col {
	padding: 14px 0;
}
.el-form .el-form-item {
	margin-bottom: 0;
}
.el-form >>> .el-form-item .el-form-item__content {
	width: 60%!important;
}
.el-form >>> .el-form-item__content .el-select {
	width: 100%;
}
.el-form >>> .el-form-item__content .el-input {
	width: 100%;
}

.font-color {
	color: #c0c4cc;
}
/* 右侧导航 */
.history-timeline{
	margin-top:28px;
}
.history-timeline .time-line{
	display: flex;
	position:relative;
	overflow: hidden;
	vertical-align: center;
}
.time-line .time-line-circle{
	width:10px;
	height:10px;
	border-radius:10px;
	background-color:#e6e6e6;
	position:relative;
	top:0px;
	margin:0 14px;
}
.time-line .time-line-right{
	width:58.8%;
}
.time-line-right .line-right-text span{
	display: block;
	line-height: 24px;
}
.line-right-text .span-t{
	color:#c0c4cc;
	cursor: pointer;
	margin-top:-5px;
}
.line-right-text .span-content{
	padding-bottom:25px;
}
.time-line-circle i{
	width:2px;
	height:100vh;
	z-index: -1;
	background-color: #e6e6e6;
	margin-left:-1px;
	position:absolute;
	left:50%;
}
.time-line:last-of-type .time-line-circle i{
	height:0;
}
.bgcolor {
	background: rgb(64, 158, 255)!important;
}
.bgcolor:after {
	background: rgb(64, 158, 255)!important;
}
.textcolor {
	color: rgb(64, 158, 255)!important;
}
/* 图片上传 */
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
	margin-top: 0;
	margin-left: 30px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader img {
	width: 130px;
	margin-top: 8px;
	margin-left: 8px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 132px;
  height: 132px;
  line-height: 132px;
  text-align: center;
}
.avatar {
  width: 132px;
  height: 132px;
  display: block;
}
/*	.space-2{
		letter-spacing: 28px;
	}
	.space-0{
		letter-spacing: 0;
	}
	.space-3{
		letter-spacing: 7px;
	}*/
</style>
<script>
import QRCode from 'qrcodejs2'
import Print from 'print-js'
import { getToken } from '@/utils/auth'
import { personDetail, getCompanySelect, getOtherSelect, getSectionSelect, getPositiveTime, getContractTime, getBirth, savePersonal, setLeave } from '@/api/hr'
  export default {
    data() {
			var checkPhone = (rule, value, callback) => {
				if (rule.field === 'emergency_contact_mobile') {
					if (value !== '') {
						if (value.length !== 11) {
							callback(new Error('手机号长度 11 个字符'))
						} else if (!(/^1[3456789]\d{9}$/.test(value))) {
							callback(new Error('手机号格式错误'))
						} else {
							callback()
						}
					} else {
						callback()
					}
				} else {
					if (value === '') {
						callback(new Error('请输入手机号'))
					} else if (value.length !== 11) {
						callback(new Error('手机号长度 11 个字符'))
					} else if (!(/^1[3456789]\d{9}$/.test(value))) {
						callback(new Error('手机号格式错误'))
					} else {
						callback()
					}
				}
			}
			var checkNum = (rule, value, callback) => {
				if (value !== '') {
					if (value.length === parseInt(value).toString().length) {
						if (rule.field === 'social_account') {
							if (value.length < 1 && value.lengt > 20) {
								callback(new Error('社保账号长度18以内'))
							} else {
								callback()
							}
						} else if (rule.field === 'public_fund_account') {
							if (value.length < 1 && value.lengt > 20) {
								callback(new Error('公积金账号长度20以内'))
							} else {
								callback()
							}
						} else if (rule.field === 'bank_card_num') {
							if (value.length < 1 && value.lengt > 20) {
								callback(new Error('银行卡号长度20以内'))
							} else {
								callback()
							}
						} else {
							callback()
						}
					} else {
						if (rule.field === 'social_account') {
							if (value.length > 18) {
								callback(new Error('社保账号长度18以内'))
							} else {
								callback(new Error('社保账号必须为纯数字'))
							}
						} else if (rule.field === 'public_fund_account') {
							if (value.length > 20) {
								callback(new Error('公积金账号长度20以内'))
							} else {
								callback(new Error('公积金账号必须为纯数字'))
							}
						} else if (rule.field === 'bank_card_num') {
							if (value.length > 20) {
								callback(new Error('银行卡号长度20以内'))
							} else {
								callback(new Error('银行卡号必须为纯数字'))
							}
						} else {
							callback()
						}
					}
				} else {
					callback()
				}
			}
			var checkIdcard = (rule, value, callback) => {
				const city = {
					11: '北京',
					12: '天津',
					13: '河北',
					14: '山西',
					15: '内蒙古',
					21: '辽宁',
					22: '吉林',
					23: '黑龙江 ',
					31: '上海',
					32: '江苏',
					33: '浙江',
					34: '安徽',
					35: '福建',
					36: '江西',
					37: '山东',
					41: '河南',
					42: '湖北 ',
					43: '湖南',
					44: '广东',
					45: '广西',
					46: '海南',
					50: '重庆',
					51: '四川',
					52: '贵州',
					53: '云南',
					54: '西藏 ',
					61: '陕西',
					62: '甘肃',
					63: '青海',
					64: '宁夏',
					65: '新疆',
					71: '台湾',
					81: '香港',
					82: '澳门',
					91: '国外 '
				}
				let year = value.substr(6, 4)
				let mounth = value.substr(10, 2)
				let day = value.substr(12, 2)
				if (value === '') {
					callback(new Error('请输入身份证号码'))
				} else if (!value || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(value)) {
					callback(new Error('身份证号格式错误'))
				} else if (!city[value.substr(0, 2)]) {
					callback(new Error('身份证号格式错误'))
				} else {
					callback()
				}
				// 平润年
				if (((year % 400 === 0) || year % 100 !== 0) && year % 4 === 0) {
					if (mounth === '02') {
						if (day * 1 > 29) {
							callback(new Error('身份证号格式错误'))
						} else {
							callback()
						}
					}
				} else {
					if (mounth === '02') {
						if (day * 1 > 28) {
							callback(new Error('身份证号格式错误'))
						} else {
							callback()
						}
					}
				}
			}
      return {
				printHtml: false,
				id: this.$route.query.id,
				http: process.env.BASE_API + '/backend/employee/upload-file?token=' + getToken(),
				watch: true,
				part: 1,
				initText: {},
				height: null,
				imgJson: {},
				isDaYin: true,
				scrollBar: [0, 300, 500, 682, 1080, 1260, 1400, 1585], // 滚动条距顶部高度
				bgColor: [true, false, false, false, false, false, false, false],
				photoArr: {
					header: '',
					header_url: '',
					ID_card_front: '',
					ID_card_front_url: '',
					ID_card_reverse: '',
					ID_card_reverseurl: '',
					academic: '',
					academic_url: '',
					degree: '',
					degree_url: '',
					leave_positive: '',
					leave_positive_url: ''
				},
				ruleForm: {
					// username: '',
					// job_num: '',
					// company_id: '',
					// department_id: '',
					// position: '',
					// mobile: '',
					// entry_time: '',
					// leave_time: '',
					// emptype: '',
					// trial: '',
					// status: '',
					// positive_time: '',
					// contract_type: '',
					// contract_life: '',
					// contract_begin_time: '',
					// contract_end_time: '',
					// Id_name: '',
					// identify: '',
					// birthday: '',
					// sex: '',
					// nation: '',
					// Id_address: '',
					// Id_deadline: '',
					// register_type: '',
					// marriage: '',
					// political: '',
					// social_account: '',
					// public_fund_account: '',
					// highest_degree: '',
					// graduate_school: '',
					// graduate_time: '',
					// major: '',
					// bank_card_num: '',
					// open_bank: '',
					// emergency_contact_name: '',
					// emergency_contact_mobile: '',
					// emergency_contact_relation: ''
				},
				rules: {
						username: [
							{ required: true, message: '请输入姓名', trigger: 'blur' },
							{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
						],
						mobile: [
							{ required: true, validator: checkPhone, trigger: 'blur' }
						],
						company_id: [
							{ required: true, message: '请选择隶属公司', trigger: 'change' }
						],
						department_id: [
							{ required: true, message: '请选择部门', trigger: 'change' }
						],
						position: [
							{ required: true, message: '请输入职位', trigger: 'blur' },
							{ min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
						],
						entry_time: [
							{ required: true, message: '请选择日期', trigger: 'change' }
						],
						leave_time: [
							{ required: true, message: '请选择日期', trigger: 'change' }
						],
						emptype: [
							{ required: true, message: '请选择员工类型', trigger: 'change' }
						],
						trial: [
							{ required: true, message: '请选择试用期', trigger: 'change' }
						],
						status: [
							{ required: true, message: '请选择员工状态', trigger: 'change' }
						],
						positive_time: [
							{ required: true, message: '请选择转正日期', trigger: 'change' }
						],
						contract_type: [
							{ required: true, message: '请选择合同类型', trigger: 'change' }
						],
						contract_life: [
							{ required: true, message: '请选择合同期限', trigger: 'change' }
						],
						contract_begin_time: [
							{ required: true, message: '请选择合同起始日', trigger: 'change' }
						],
						contract_end_time: [
							{ required: true, message: '请选择合同到期日', trigger: 'change' }
						],
						Id_name: [
							{ required: true, message: '请输入姓名', trigger: 'blur' },
							{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
						],
						identify: [
							{ required: true, validator: checkIdcard, trigger: 'blur' }
						],
						birthday: [
							{ required: true, message: '请选择出生日期', trigger: 'change' }
						],
						sex: [
							{ required: true, message: '请选择性别', trigger: 'change' }
						],
						nation: [
							{ required: true, message: '请选择民族', trigger: 'change' }
						],
						Id_address: [
							{ required: false, message: '请输入身份证地址', trigger: 'blur' },
							{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
						],
						Id_deadline: [
							{ required: false, message: '请选择证件有效期', trigger: 'change' }
						],
						register_type: [
							{ required: false, message: '请选择证件类型', trigger: 'change' }
						],
						marriage: [
							{ required: false, message: '请选择婚姻状况', trigger: 'change' }
						],
						political: [
							{ required: false, message: '请选择政治面貌', trigger: 'change' }
						],
						social_account: [
							{ required: false, validator: checkNum, trigger: 'blur' }
						],
						public_fund_account: [
							{ required: false, validator: checkNum, trigger: 'blur' }
						],
						highest_degree: [
							{ required: false, message: '请选择最高学历', trigger: 'change' }
						],
						graduate_school: [
							{ required: false, message: '请输入毕业院校', trigger: 'blur' },
							{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
						],
						graduate_time: [
							{ required: false, message: '请选择毕业时间', trigger: 'change' }
						],
						major: [
							{ required: false, message: '请输入所学专业', trigger: 'blur' },
							{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
						],
						bank_card_num: [
							{ required: false, validator: checkNum, trigger: 'blur' }
						],
						open_bank: [
							{ required: false, message: '请输入开户行', trigger: 'blur' },
							{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
						],
						emergency_contact_name: [
							{ required: false, message: '请输入姓名', trigger: 'blur' },
							{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
						],
						emergency_contact_mobile: [
							{ required: false, validator: checkPhone, trigger: 'blur' }
						],
						emergency_contact_relation: [
							{ required: false, message: '请选择与联系人关系', trigger: 'change' }
						]
				},
				navRight: ['基础信息', '工作信息', '合同信息', '个人信息', '学历信息', '工资卡信息', '紧急联系人', '个人资料'],
				selectArr: {
					company_arr: [],
					section_arr: [],
					emptype_arr: [],
					trial_arr: [],
					employee_status_arr: [],
					contract_type_arr: [],
					contract_life_arr: [],
					sex_arr: [],
					nation_arr: [],
					register_arr: [],
					marriage_arr: [],
					political_arr: [],
					highest_arr: [],
					emergency_arr: []
				},
				picker: {
					options1: {
						disabledDate(time) {
						}
					},
					options2: {
						disabledDate(time) {
						}
					},
					options3: {
						disabledDate(time) {
						}
					},
					options4: {
						disabledDate(time) {
						}
					}
				}
      }
		},
		created() {
			this.ininSelect()
			this.init()
		},
    methods: {
			init() {
				personDetail({emp_id: this.id}).then((response) => {
					// 查看编辑 时间转换
					if (response.data.entry_time !== '0') {
						response.data.entry_time = this.parseTime(parseInt(response.data.entry_time))
					} else {
						response.data.entry_time = ''
					}
					if (response.data.leave_time !== '0') {
						response.data.leave_time = this.parseTime(parseInt(response.data.leave_time))
					} else {
						response.data.leave_time = ''
					}
					if (response.data.positive_time !== '0') {
						response.data.positive_time = this.parseTime(parseInt(response.data.positive_time))
					} else {
						response.data.positive_time = ''
					}
					if (response.data.contract_begin_time !== '0') {
						response.data.contract_begin_time = this.parseTime(parseInt(response.data.contract_begin_time))
					} else {
						response.data.contract_begin_time = ''
					}
					if (response.data.contract_end_time !== '0') {
						response.data.contract_end_time = this.parseTime(parseInt(response.data.contract_end_time))
					} else {
						response.data.contract_end_time = ''
					}
					if (response.data.birthday !== '0') {
						response.data.birthday = this.parseTime(parseInt(response.data.birthday))
					} else {
						response.data.birthday = ''
					}
					if (response.data.Id_deadline !== '0') {
						response.data.Id_deadline = this.parseTime(parseInt(response.data.Id_deadline))
					} else {
						response.data.Id_deadline = ''
					}
					if (response.data.graduate_time !== '0') {
						response.data.graduate_time = this.parseTime(parseInt(response.data.graduate_time))
					} else {
						response.data.graduate_time = ''
					}
					// 点取消会重置表单 所有查看用一个新变量
					this.ruleForm = Object.assign({}, response.data)
					this.initText = Object.assign({}, response.data)
					// 下拉默认值
					if (this.ruleForm.sex === '0') {
						this.ruleForm.sex = ''
					}
					if (this.ruleForm.nation === '0') {
						this.ruleForm.nation = ''
					}
					if (this.ruleForm.marriage === '0') {
						this.ruleForm.marriage = ''
					}
					if (this.ruleForm.political === '0') {
						this.ruleForm.political = ''
					}
					if (this.ruleForm.register_type === '0') {
						this.ruleForm.register_type = ''
					}
					if (this.ruleForm.highest_degree === '0') {
						this.ruleForm.highest_degree = ''
					}
					if (this.ruleForm.emergency_contact_relation === '0') {
						this.ruleForm.emergency_contact_relation = ''
					}
					// 图片转换成json
					this.imgJson = this.initText.img_url
					this.photoArr.header_url = response.data.photo_url
					if (this.imgJson) {
						this.photoArr.ID_card_front_url = this.imgJson.ID_card_front
						this.photoArr.ID_card_reverse_url = this.imgJson.ID_card_reverse
						this.photoArr.academic_url = this.imgJson.academic
						this.photoArr.degree_url = this.imgJson.degree
						this.photoArr.leave_positive_url = this.imgJson.leave_positive
					}
					this.getQrcode()
					getSectionSelect({company_id: this.ruleForm.company_id}).then((response) => {
						this.selectArr.section_arr = response.data
					})
					// 查看时如果值为空显示-
					for (let value in this.initText) {
						if (this.initText[value] === null || this.initText[value] === '' || this.initText[value] === undefined) {
							this.initText[value] = '-'
						}
					}
				})
			},
			ininSelect() {
				getCompanySelect().then((response) => {
					this.selectArr.company_arr = response.data
				})
				getOtherSelect({type: 'emptype'}).then((response) => {
					this.selectArr.emptype_arr = response.data
				})
				getOtherSelect({type: 'trial'}).then((response) => {
					this.selectArr.trial_arr = response.data
				})
				getOtherSelect({type: 'employee_status'}).then((response) => {
					this.selectArr.employee_status = response.data
				})
				getOtherSelect({type: 'contract_type'}).then((response) => {
					this.selectArr.contract_type_arr = response.data
				})
				getOtherSelect({type: 'contract_life'}).then((response) => {
					this.selectArr.contract_life_arr = response.data
				})
				getOtherSelect({type: 'sex'}).then((response) => {
					this.selectArr.sex_arr = response.data
				})
				getOtherSelect({type: 'nation'}).then((response) => {
					this.selectArr.nation_arr = response.data
				})
				getOtherSelect({type: 'register_type'}).then((response) => {
					this.selectArr.register_arr = response.data
				})
				getOtherSelect({type: 'marriage'}).then((response) => {
					this.selectArr.marriage_arr = response.data
				})
				getOtherSelect({type: 'political'}).then((response) => {
					this.selectArr.political_arr = response.data
				})
				getOtherSelect({type: 'highest_degree'}).then((response) => {
					this.selectArr.highest_arr = response.data
				})
				getOtherSelect({type: 'emergency_contact_relation'}).then((response) => {
					this.selectArr.emergency_arr = response.data
				})
			},
			companyChoose() {
				getSectionSelect({company_id: this.ruleForm.company_id}).then((response) => {
					this.selectArr.section_arr = response.data
				})
				this.ruleForm.department_id = ''
			},
			setLeaveBtn() {
				this.$confirm('确定要设置该员工为离职吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
					setLeave({employee_id: this.id}).then((response) => {
						if (response.status === 200) {
							this.$message({
								message: '设置离职成功',
								type: 'success'
							})
							this.watch = true
							this.init()
							this.getQrcode()
							this.$nextTick(() => {
								const myScroll = document.querySelector('.scrollbar-wrap')
								myScroll.addEventListener('scroll', this.menu, true)
								this.heightChange(0)
							})
						}
					})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
					})
				})
			},
			idBlur(val) {
				if (/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(val)) {
					getBirth({id_card: val}).then((response) => {
						this.ruleForm.birthday = response.data.birthday
						this.ruleForm.sex = response.data.sex
					})
				}
			},
			updateBtn() {
				this.watch = false
				setTimeout(() => {
					this.getQrcode()
				}, 100)
				this.$nextTick(() => {
					const myScroll = document.querySelector('.scrollbar-wrap')
					myScroll.addEventListener('scroll', this.menu, true)
					this.heightChange(0)
				})
			},
			saveBtn() {
				this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
						this.ruleForm.emp_id = parseInt(this.id)
						delete this.ruleForm.leave_time
						this.ruleForm.photo_url = this.photoArr.header_url
						this.ruleForm.ID_card_front = this.photoArr.ID_card_front_url
						this.ruleForm.ID_card_reverse = this.photoArr.ID_card_reverse_url
						this.ruleForm.academic = this.photoArr.academic_url
						this.ruleForm.degree = this.photoArr.degree_url
						this.ruleForm.leave_positive = this.photoArr.leave_positive_url
						console.log(this.ruleForm)
						savePersonal(this.ruleForm).then((response) => {
							if (response.status === 200) {
								this.$message({
									message: '编辑成功',
									type: 'success'
								})
								this.watch = true
								this.ininSelect()
								this.init()
								setTimeout(() => {
									this.getQrcode()
								}, 100)
								this.$nextTick(() => {
									const myScroll = document.querySelector('.scrollbar-wrap')
									myScroll.addEventListener('scroll', this.menu, true)
									this.heightChange(0)
								})
							}
						})
          } else {
						console.log('error submit!!')
						this.$message.error('提示：请完善带 * 的信息')
            return false
          }
        })
			},
			resetForm() {
				this.watch = true
				this.$refs['ruleForm'].resetFields()
				this.init()
				this.getQrcode()
				this.$nextTick(() => {
					const myScroll = document.querySelector('.scrollbar-wrap')
					myScroll.addEventListener('scroll', this.menu, true)
					this.heightChange(0)
				})
			},
			baseTime() {
				const _this = this
				_this.picker.options2 = {
					disabledDate(time) {
						return time.getTime() < new Date(_this.ruleForm.entry_time).getTime()
					}
				}
				_this.trialChoose()
			},
			trialChoose() {
				if (this.ruleForm.entry_time && this.ruleForm.trial) {
					getPositiveTime({entry_time: this.ruleForm.entry_time, trial: this.ruleForm.trial}).then((response) => {
						this.ruleForm.positive_time = response.data.positive_time
					})
				}
			},
			beginTime() {
				const _this = this
				_this.picker.options4 = {
					disabledDate(time) {
						return time.getTime() < new Date(_this.ruleForm.contract_begin_time).getTime()
					}
				}
				_this.contractChoose()
			},
			contractChoose() {
				if (this.ruleForm.contract_begin_time && this.ruleForm.contract_life) {
					getContractTime({contract_begin_time: this.ruleForm.contract_begin_time, contract_life: this.ruleForm.contract_life}).then((response) => {
						this.ruleForm.contract_end_time = response.data.contract_endline
					})
				}
			},
			scrollTo(clickIndex) {
				const scrollDom = document.querySelector('.el-scrollbar__wrap')
				this.scrollBar.forEach((item, index) => {
					if (index === clickIndex) {
						scrollDom.scrollTop = item
					}
				})
				this.height = scrollDom.scrollTop
				this.heightChange(this.height)
			},
      headerSuccess(res, file) {
				this.photoArr.header = URL.createObjectURL(file.raw)
				this.photoArr.header_url = res.data.fileUrl
      },
			ID_frontSuccess(res, file) {
				this.photoArr.ID_card_front = URL.createObjectURL(file.raw)
				this.photoArr.ID_card_front_url = res.data.fileUrl
      },
			ID_reverseSuccess(res, file) {
				this.photoArr.ID_card_reverse = URL.createObjectURL(file.raw)
				this.photoArr.ID_card_reverse_url = res.data.fileUrl
      },
			academicSuccess(res, file) {
				this.photoArr.academic = URL.createObjectURL(file.raw)
				this.photoArr.academic_url = res.data.fileUrl
      },
			degreeSuccess(res, file) {
				this.photoArr.degree = URL.createObjectURL(file.raw)
				this.photoArr.degree_url = res.data.fileUrl
      },
			leaveSuccess(res, file) {
				this.photoArr.leave_positive = URL.createObjectURL(file.raw)
				this.photoArr.leave_positive_url = res.data.fileUrl
      },
      beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2
				const isJPG = file.type === 'image/jpeg'
				const isPNG = file.type === 'image/png'

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能上传jpg/png文件!')
				}
        return isLt2M
			},
			back() {
				this.$router.push('/hr/roster')
			},
			getQrcode() {
				setTimeout(() => {
					if (document.getElementById('printQrcode')) {
						console.log(1)
						if (document.getElementById('printQrcode').children.length < 2) {
							console.log(2)
							let qrcode = new QRCode('printQrcode', {
								width: 66,
								height: 66,
								text: this.initText.employee_id
							})
							console.log(qrcode)
						}
					}
					if (document.getElementById('qrcode').children.length < 2) {
						let qrcode = new QRCode('qrcode', {
							width: 116,
							height: 116,
							text: this.initText.employee_id
						})
						console.log(qrcode)
					}
				}, 0)
			},
			menu() {
				// 查看滚动条距顶部的距离
				const scrollDom = document.querySelector('.scrollbar-wrap .el-scrollbar__wrap')
				this.height = scrollDom.scrollTop
			},
			heightChange(curr) {
				this.scrollBar.forEach((item, index) => {
					if (curr >= 0 && curr < 300) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, false)
						this.$set(this.bgColor, 2, false)
						this.$set(this.bgColor, 3, false)
						this.$set(this.bgColor, 4, false)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 300 && curr < 500) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, false)
						this.$set(this.bgColor, 3, false)
						this.$set(this.bgColor, 4, false)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 500 && curr < 682) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, false)
						this.$set(this.bgColor, 4, false)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 682 && curr < 1080) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, false)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 1080 && curr < 1260) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, true)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 1260 && curr < 1400) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, true)
						this.$set(this.bgColor, 5, true)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 1400 && curr < 1585) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, true)
						this.$set(this.bgColor, 5, true)
						this.$set(this.bgColor, 6, true)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 1585) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, true)
						this.$set(this.bgColor, 5, true)
						this.$set(this.bgColor, 6, true)
						this.$set(this.bgColor, 7, true)
					}
				})
			},
			parseTime(timestamp) {
				const date = new Date(parseInt(timestamp) * 1000)
				const Y = date.getFullYear() + '-'
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				return Y + M + D
			},
			changeZero(val) {
				if (val === '0') {
					val = ''
				}
			},
			dayin() {
				// 打印api https://printjs.crabbly.com/
				this.printHtml = true
				this.getQrcode()
				setTimeout(() => {
					this.$nextTick(() => {
						Print({
							printable: 'printWrap',
							maxWidth: '100px',
							honorColor: true,
							type: 'html',
							// 继承原来的所有样式
							targetStyles: ['*']
						})
						this.printHtml = false
					})
				}, 500)
			}
		},
		mounted() {
			const myScroll = document.querySelector('.scrollbar-wrap')
			myScroll.addEventListener('scroll', this.menu, true)
		},
		watch: {
			height: function(curr) {
				this.heightChange(curr)
			}
		}
  }
</script>
